import React, { Component } from 'react'
import './index.css'
export default class List extends Component {
    render() {
        const { isFirst,loading,error,userList } = this.props;
        return (
            <div className="row">
                {
                    isFirst ? <h3>欢迎使用GitHub用户查询</h3> :
                    loading? <h3>Loading...</h3>:
                    error ? <h2 style={{color: 'red'}}>error</h2> : 
                    userList.map((userObj) => {
                      return (  <div className="card" key={userObj.id}>
                            <a rel="noreferrer" href={userObj.home} target="_blank">
                                <img alt="pic can not be loaded" src={userObj.avator} style={{ width: '100px' }} />
                            </a>
                            <p className="card-text">{userObj.name}</p>
                        </div>)
                    })
                }
            </div>
        )
    }
}
